<template>
  <div class='container' style="padding:20px">
    <el-card shadow="never">
      <div class="el-card_header">试题录入</div>
      <el-divider></el-divider>
      <el-form :model="form" ref="form" label-width="120px" :rules="rules">
        <el-form-item label="学科" prop="subjectID">
          <el-select v-model="form.subjectID" style="width:400px" placeholder="请选择" @change="getdirectorys(form.subjectID)">
            <el-option v-for="item in subjectsList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select v-if="!this.id" v-model="form.catalogID" style="width:400px" placeholder="请选择">
            <el-option v-for="(item,index) in directorysList" :key="index" :label="item.directoryName" :value="item.id"></el-option>
          </el-select>
          <!-- 编辑 -->
          <el-select v-else v-model="form.direction" style="width:400px" placeholder="请选择">
            <el-option v-for="(item,index) in directorysList" :key="index" :label="item[form.catalogID]" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterpriseID">
          <el-select v-model="form.enterpriseID" style="width:400px" placeholder="请选择">
            <el-option v-for="item in companysList" :key="item.id" :label="item.company" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-select prop="province" v-model="form.province" style="width:200px" placeholder="请选择" @change="getCitys(form.province)">
            <el-option v-for="item in provincesList " :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="form.city" prop="city" style="width:200px" placeholder="请选择">
            <el-option v-for="item in citysList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="form.direction" style="width:400px" placeholder="请选择">
            <el-option v-for="item in directionList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型">
          <el-radio-group v-model="form.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度">
          <el-radio-group v-model="form.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" prop="question">
          <quill-editor @blur="$refs.form.validateField('question')" v-model="form.question"></quill-editor>
        </el-form-item>
        <!-- 单选 -->
        <el-form-item label="选项" v-if="this.form.questionType==='1'">
          <template v-if="!this.id">
            <div class="option_item" v-for="item in options" :key="item.code">
              <el-radio-group v-model="form.options[0].code">
                <el-radio :label="item.code">
                  {{item.code}}
                </el-radio>
              </el-radio-group>
              <el-input class="inp" v-model="item.title" />
              <UploadImg v-model="item.img" />
            </div>
            <el-button type="danger" disabled size="small">
              +增加选项与答案
            </el-button>
          </template>
          <template v-else>
            <div class="option_item" v-for="item in form.options" :key="item.code">
              <el-radio-group v-model="form.options[0].code">
                <el-radio :label="item.code">
                  {{item.code}}
                </el-radio>
              </el-radio-group>
              <el-input class="inp" v-model="item.title" />
              <UploadImg v-model="item.img" />
            </div>
            <el-button type="danger" disabled size="small">
              +增加选项与答案
            </el-button>
          </template>
        </el-form-item>
        <!-- 多选 -->
        <el-form-item label="选项" v-if="this.form.questionType=== '2'">
          <!-- 多选 -->
          <template v-if="!this.id">
            <div class="option_item" v-for="item in options" :key="item.code">
              <el-checkbox-group v-model="MultiSelectList">
                <el-checkbox :label="item.code">
                </el-checkbox>
              </el-checkbox-group>
              <el-input class="inp" v-model="item.title" />
              <UploadImg v-model="item.img" />
            </div>
            <el-button type="danger" :disabled="!this.form.questionType === 2" @click="hAddOption" size="small">
              +增加选项与答案
            </el-button>
          </template>
          <template v-else>
            <div class="option_item" v-for="item in form.options" :key="item.code">
              <el-checkbox-group v-model="editList">
                <el-checkbox :label="item.code">
                </el-checkbox>
              </el-checkbox-group>
              <el-input class="inp" v-model="item.title" />
              <UploadImg v-model="item.img" />
            </div>
            <el-button type="danger" :disabled="!this.form.questionType === 2" @click="hAddOptions" size="small">
              +增加选项与答案
            </el-button>
          </template>
        </el-form-item>
        <el-form-item label="视频解析" prop="videoURL">
          <el-input v-model="form.videoURL"></el-input>
        </el-form-item>
        <el-form-item label="答案解析" prop="answer">
          <quill-editor @blur="$refs.form.validateField('answer')" v-model="form.answer"></quill-editor>
        </el-form-item>
        <el-form-item label="题目备注" style="width:500px" prop="remarks">
          <el-input type="textarea" v-model="form.remarks" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="试题标签">
          <el-select v-model="tags" style="width:400px" multiple filterable allow-create default-first-option placeholder="请选择试题标签">
            <el-option v-for="item in tagsList" :key="item.id" :label="item.tagName" :value="item.tagName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="hSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { list } from '../../api/hmmm/subjects'
import { list as directorysList } from '../../api/hmmm/directorys'
import { list as companysList } from '../../api/hmmm/companys'
import { provinces, citys } from '../../api/hmmm/citys'
import { direction } from '../../api/hmmm/constants'
import UploadImg from '../components/UploadImg.vue'
import { list as tagsList } from '../../api/hmmm/tags'
import { add, detail, update } from '../../api/hmmm/questions'
export default {
  components: { UploadImg },
  data () {
    return {
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [
          {
            code: '',
            title: ''
          }
        ], // 选项
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'change' }],
        province: [{ required: true, message: '请选择城市', trigger: 'change' }],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        videoURL: [{ required: true, message: '请输入视频解析', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入题目备注', trigger: 'blur' }]
      },
      // 学科列表
      subjectsList: [],
      // 目录列表
      directorysList: [],
      // 企业列表
      companysList: [],
      // 城市列表
      provincesList: [...provinces()],
      // 地区列表
      citysList: [],
      // 标签列表
      tagsList: [],
      // 方向列表
      directionList: direction,
      options: [
        {
          code: 'A',
          title: '',
          isRight: false,
          img: ''
        },
        {
          code: 'B',
          title: '',
          isRight: false,
          img: ''
        },
        {
          code: 'C',
          title: '',
          isRight: false,
          img: ''
        },
        {
          code: 'D',
          title: '',
          isRight: false,
          img: ''
        }
      ],
      MultiSelectList: [], //
      number: 4,
      init: 68,
      tags: [],
      id: this.$route.query.id,
      editList: []
    }
  },
  created () {
    this.initSubjects()
    this.initCompanys()
    this.updateQuestions()
  },
  methods: {
    // 初始化学科
    async initSubjects () {
      const { data: res } = await list({ page: 1, pagesize: 100 })
      this.subjectsList = res.items
    },
    // 获取目录
    async getdirectorys (id) {
      this.catalogID = ''
      try {
        const { data: res } = await directorysList({ page: 1, pagesize: 100, subjectID: id })
        this.directorysList = res.items
        const result = await tagsList({ subjectID: this.form.subjectID })
        this.tagsList = result.data.items
      } catch (e) {
        console.log(e)
      }
    },
    // 初始化企业
    async initCompanys () {
      const { data: res } = await companysList({ page: 1, pagesize: 100 })
      this.companysList = res.items
    },
    // 获取地区列表
    getCitys (name) {
      this.citysList = citys(name)
    },
    // 获取标签
    async getTags () {
      console.log(123)
      const res = await tagsList({ subjectID: this.form.subjectID })
      console.log(res)
    },
    // 提交
    async hSubmit () {
      // 兜底校验
      const valid = await this.$refs.form.validate().catch(e => e)
      if (!valid) return
      if (this.id) {
        // 编辑
        try {
          await update(this.form)
          this.$message.success('修改成功')
          this.$router.back()
        } catch (e) {
          this.$message.success('修改失败')
        }
      } else {
        // 添加
        if (this.form.questionType === '1') {
          const obj = this.options.find(item => item.code === this.form.options[0].code) // 单选的数据
          this.options.forEach(item => {
            if (item.code === obj.code) {
              item.isRight = true
            }
          })
          this.form.tags = this.tags[0]
          this.form.options = this.options
        } else {
          this.options.forEach(item => {
            this.MultiSelectList.forEach(obj => {
              if (item.code === obj) {
                item.isRight = true
              }
            })
          })
          this.form.tags = this.tags[0]
          this.form.options = this.options
        }
        try {
          await add(this.form)
          this.$message.success('添加试题成功')
          this.$router.push('/questions/list')
        } catch (e) {
          console.log(e)
        }
      }
    },
    // 点击添加选项
    hAddOption () {
      this.number++
      this.init++
    },
    // 编辑的按钮
    hAddOptions () {
      // const code = this.form.options[this.form.options.length - 1].code
      // console.log(this.form.options[this.form.options.length - 1].code.charCodeAt(0))
      this.init = this.form.options[this.form.options.length - 1].code.charCodeAt(0)
      // this.number++
      this.init++
      this.form.options.push(
        {
          code: String.fromCharCode(this.init),
          title: '',
          img: '',
          isRight: false
        })
    },
    // 修改试题
    async updateQuestions () {
      if (!this.id) return
      const res = await detail({ id: this.id })
      this.form = res.data
      this.editList = res.data.options.map(item => {
        if (item.isRight === 1) {
          return item.code
        }
      })
      this.tags = [res.data.tags]
    }
  },
  watch: {
    number () {
      this.options.push(
        {
          code: String.fromCharCode(this.init),
          title: ''
        }
      )
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .ql-editor {
  min-height: 200px;
}
.inp {
  display: inline-block;
  width: 240px;
}
.container .option_item .upload {
  display: inline-block;
}

.option_item {
  padding-bottom: 15px;
}

.option_item ::v-deep .el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  height: 60px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
}
.el-checkbox-group {
  display: inline-block;
}
</style>
